<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <title></title>
    <meta content="" name="keywords">
    <meta content="" name="description">
    <link rel="stylesheet" href="css/3.css">
    <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
    <script type="text/javascript">
        !function () {
            var htmlEl = document.getElementsByTagName('html')[0];
            var fitPage = function () {
                /* The calculate of with from zepto  */
                var w = htmlEl.getBoundingClientRect().width;
                w = Math.round(w);
                w = w > 750 ? 750 : w;
                var newW = w / 750 * 100;
                htmlEl.style.fontSize = newW + 'px';
            }
            fitPage();
            var t;
            var func = function () {
                clearTimeout(t);
                t = setTimeout(fitPage, 25);
            }
            window.addEventListener('resize', func);
        }();
    </script>
</head>
<body>
<header class="dc-header dc-header-fixed">

    <div class="dc-header-box">
        <div class="dc-header-logo"></div>
        <div class="dc-shop-title">
            <h2 class="dc-header-shopName">秀水餐厅</h2>
            <div class="dc-header-delivery">
                <span class="dc-first-span">早6:00-9:00</span>
                <span>午11:00-13:00</span>
                <span>晚17:00-19:00</span>
                <span class="dc-cell-fr"></span>
            </div>
        </div>
        <div class="dc-header-right">
            <a href="#">换餐厅</a>
        </div>
    </div>
    <div class="dc-header-tab">
        <div class="dc-header-date">2017-02-24 <span>周五</span></div>
        <div class="dc-cell-fr"></div>
    </div>
</header>
<section class="dc-content">
    <nav class="dc-nav">
        <a data-id="1" class="dc-active"  href="#">早餐</a>
        <a data-id="2" href="#">午餐</a>
        <a data-id="3" href="#">晚餐</a>
        <a data-id="4" href="#">夜宵</a>
    </nav>
    <div class="dc-foods">
        <div class="dc-active">
            <div class="dc-menu-wrapper">
                <ul>
                    <li class="dc-menu-item">
          <span class="dc-text">
            主食
          </span>
                    </li>
                    <li class="dc-menu-item">
          <span class="dc-text">
            素菜
          </span>
                    </li>
                    <li class="dc-menu-item">
          <span class="dc-text">
            荤菜
          </span>
                    </li>
                    <li class="dc-menu-item">
          <span class="dc-text">
            点心
          </span>
                    </li>
                    <li class="dc-menu-item">
          <span class="dc-text">
            套餐
          </span>
                    </li>
                    <li class="dc-menu-item">
          <span class="dc-text">
            主食
          </span>
                    </li>
                    <li class="dc-menu-item dc-active">
          <span class="dc-text">
            素菜
          </span>
                    </li>
                    <li class="dc-menu-item">
          <span class="dc-text">
            荤菜
          </span>
                    </li>
                    <li class="dc-menu-item">
          <span class="dc-text">
            点心
          </span>
                    </li>
                    <li class="dc-menu-item">
          <span class="dc-text">
            套餐
          </span>
                    </li>
                </ul>
            </div>
            <div class="dc-foods-wrapper">
                <ul>
                    <li class="dc-food-item">
                        <div class="dc-icon">
                            <img alt="food" src="images/food.png">
                        </div>
                        <div class="dc-food-content">
                            <h2 class="dc-name">外婆家红烧鱼</h2>
                            <div class="dc-residue">
                                还剩<span>111</span>份
                            </div>
                            <div class="dc-price">
                                ¥<span>12.0</span>
                            </div>
                            <div class="dc-cartControl-wrapper">
                                <span class="dc-sub">－</span>
                                <span class="dc-count">12</span>
                                <span class="dc-add">＋</span>
                            </div>
                        </div>
                    </li>
                    <li class="dc-food-item">
                        <div class="dc-icon">
                            <img alt="food" src="images/food.png">
                        </div>
                        <div class="dc-food-content">
                            <h2 class="dc-name">外婆家清蒸鱼</h2>
                            <div class="dc-residue">
                                还剩<span>111</span>份
                            </div>
                            <div class="dc-price">
                                ¥<span>12.0</span>
                            </div>
                            <div class="dc-cartControl-wrapper">
                                <span class="dc-sub">－</span>
                                <span class="dc-count">12</span>
                                <span class="dc-add">＋</span>
                            </div>
                        </div>
                    </li>
                    <li class="dc-food-item">
                        <div class="dc-icon">
                            <img alt="food" src="images/food.png">
                        </div>
                        <div class="dc-food-content">
                            <h2 class="dc-name">外婆家清蒸鱼</h2>
                            <div class="dc-residue">
                                还剩<span>111</span>份
                            </div>
                            <div class="dc-price">
                                ¥<span>12.0</span>
                            </div>
                            <div class="dc-cartControl-wrapper">
                                <span class="dc-sub">－</span>
                                <span class="dc-count">12</span>
                                <span class="dc-add">＋</span>
                            </div>
                        </div>
                    </li>
                    <li class="dc-food-item">
                        <div class="dc-icon">
                            <img alt="food" src="images/food.png">
                        </div>
                        <div class="dc-food-content">
                            <h2 class="dc-name">外婆家清蒸鱼</h2>
                            <div class="dc-residue">
                                还剩<span>111</span>份
                            </div>
                            <div class="dc-price">
                                ¥<span>12.0</span>
                            </div>
                            <div class="dc-cartControl-wrapper">
                                <span class="dc-sub">－</span>
                                <span class="dc-count">12</span>
                                <span class="dc-add">＋</span>
                            </div>
                        </div>
                    </li>
                    <li class="dc-food-item">
                        <div class="dc-icon">
                            <img alt="food" src="images/food.png">
                        </div>
                        <div class="dc-food-content">
                            <h2 class="dc-name">外婆家清蒸鱼</h2>
                            <div class="dc-residue">
                                还剩<span>111</span>份
                            </div>
                            <div class="dc-price">
                                ¥<span>12.0</span>
                            </div>
                            <div class="dc-cartControl-wrapper">
                                <span class="dc-sub">－</span>
                                <span class="dc-count">12</span>
                                <span class="dc-add">＋</span>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div>
            <div class="dc-menu-wrapper">
                <ul>
                    <li class="dc-menu-item">
          <span class="dc-text">
            主食
          </span>
                    </li>
                    <li class="dc-menu-item">
          <span class="dc-text">
            素菜
          </span>
                    </li>
                    <li class="dc-menu-item">
          <span class="dc-text">
            荤菜
          </span>
                    </li>
                    <li class="dc-menu-item">
          <span class="dc-text">
            点心
          </span>
                    </li>
                    <li class="dc-menu-item">
          <span class="dc-text">
            套餐
          </span>
                    </li>
                    <li class="dc-menu-item">
          <span class="dc-text">
            主食
          </span>
                    </li>
                    <li class="dc-menu-item dc-active">
          <span class="dc-text">
            素菜
          </span>
                    </li>
                    <li class="dc-menu-item">
          <span class="dc-text">
            荤菜
          </span>
                    </li>
                    <li class="dc-menu-item">
          <span class="dc-text">
            点心
          </span>
                    </li>
                    <li class="dc-menu-item">
          <span class="dc-text">
            套餐
          </span>
                    </li>
                </ul>
            </div>
            <div class="dc-foods-wrapper">
                <ul>
                    <li class="dc-food-item">
                        <div class="dc-icon">
                            <img alt="food" src="images/food.png">
                        </div>
                        <div class="dc-food-content">
                            <h2 class="dc-name">外婆家清蒸鱼</h2>
                            <div class="dc-residue">
                                还剩<span>111</span>份
                            </div>
                            <div class="dc-price">
                                ¥<span>12.0</span>
                            </div>
                            <div class="dc-cartControl-wrapper">
                                <span class="dc-sub">－</span>
                                <span class="dc-count">12</span>
                                <span class="dc-add">＋</span>
                            </div>
                        </div>
                    </li>
                    <li class="dc-food-item">
                        <div class="dc-icon">
                            <img alt="food" src="images/food.png">
                        </div>
                        <div class="dc-food-content">
                            <h2 class="dc-name">外婆家清蒸鱼</h2>
                            <div class="dc-residue">
                                还剩<span>111</span>份
                            </div>
                            <div class="dc-price">
                                ¥<span>12.0</span>
                            </div>
                            <div class="dc-cartControl-wrapper">
                                <span class="dc-sub">－</span>
                                <span class="dc-count">12</span>
                                <span class="dc-add">＋</span>
                            </div>
                        </div>
                    </li>
                    <li class="dc-food-item">
                        <div class="dc-icon">
                            <img alt="food" src="images/food.png">
                        </div>
                        <div class="dc-food-content">
                            <h2 class="dc-name">外婆家清蒸鱼</h2>
                            <div class="dc-residue">
                                还剩<span>111</span>份
                            </div>
                            <div class="dc-price">
                                ¥<span>12.0</span>
                            </div>
                            <div class="dc-cartControl-wrapper">
                                <span class="dc-sub">－</span>
                                <span class="dc-count">12</span>
                                <span class="dc-add">＋</span>
                            </div>
                        </div>
                    </li>
                    <li class="dc-food-item">
                        <div class="dc-icon">
                            <img alt="food" src="images/food.png">
                        </div>
                        <div class="dc-food-content">
                            <h2 class="dc-name">外婆家清蒸鱼</h2>
                            <div class="dc-residue">
                                还剩<span>111</span>份
                            </div>
                            <div class="dc-price">
                                ¥<span>12.0</span>
                            </div>
                            <div class="dc-cartControl-wrapper">
                                <span class="dc-sub">－</span>
                                <span class="dc-count">12</span>
                                <span class="dc-add">＋</span>
                            </div>
                        </div>
                    </li>
                    <li class="dc-food-item">
                        <div class="dc-icon">
                            <img alt="food" src="images/food.png">
                        </div>
                        <div class="dc-food-content">
                            <h2 class="dc-name">外婆家清蒸鱼</h2>
                            <div class="dc-residue">
                                还剩<span>111</span>份
                            </div>
                            <div class="dc-price">
                                ¥<span>12.0</span>
                            </div>
                            <div class="dc-cartControl-wrapper">
                                <span class="dc-sub">－</span>
                                <span class="dc-count">12</span>
                                <span class="dc-add">＋</span>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div>
            <div class="dc-menu-wrapper">
                <ul>
                    <li class="dc-menu-item">
          <span class="dc-text">
            主食
          </span>
                    </li>
                    <li class="dc-menu-item">
          <span class="dc-text">
            素菜
          </span>
                    </li>
                    <li class="dc-menu-item">
          <span class="dc-text">
            荤菜
          </span>
                    </li>
                    <li class="dc-menu-item">
          <span class="dc-text">
            点心
          </span>
                    </li>
                    <li class="dc-menu-item">
          <span class="dc-text">
            套餐
          </span>
                    </li>
                    <li class="dc-menu-item">
          <span class="dc-text">
            主食
          </span>
                    </li>
                    <li class="dc-menu-item dc-active">
          <span class="dc-text">
            素菜
          </span>
                    </li>
                    <li class="dc-menu-item">
          <span class="dc-text">
            荤菜
          </span>
                    </li>
                    <li class="dc-menu-item">
          <span class="dc-text">
            点心
          </span>
                    </li>
                    <li class="dc-menu-item">
          <span class="dc-text">
            套餐
          </span>
                    </li>
                </ul>
            </div>
            <div class="dc-foods-wrapper">
                <ul>
                    <li class="dc-food-item">
                        <div class="dc-icon">
                            <img alt="food" src="images/food.png">
                        </div>
                        <div class="dc-food-content">
                            <h2 class="dc-name">外婆家水煮鱼</h2>
                            <div class="dc-residue">
                                还剩<span>111</span>份
                            </div>
                            <div class="dc-price">
                                ¥<span>12.0</span>
                            </div>
                            <div class="dc-cartControl-wrapper">
                                <span class="dc-sub">－</span>
                                <span class="dc-count">12</span>
                                <span class="dc-add">＋</span>
                            </div>
                        </div>
                    </li>
                    <li class="dc-food-item">
                        <div class="dc-icon">
                            <img alt="food" src="images/food.png">
                        </div>
                        <div class="dc-food-content">
                            <h2 class="dc-name">外婆家清蒸鱼</h2>
                            <div class="dc-residue">
                                还剩<span>111</span>份
                            </div>
                            <div class="dc-price">
                                ¥<span>12.0</span>
                            </div>
                            <div class="dc-cartControl-wrapper">
                                <span class="dc-sub">－</span>
                                <span class="dc-count">12</span>
                                <span class="dc-add">＋</span>
                            </div>
                        </div>
                    </li>
                    <li class="dc-food-item">
                        <div class="dc-icon">
                            <img alt="food" src="images/food.png">
                        </div>
                        <div class="dc-food-content">
                            <h2 class="dc-name">外婆家清蒸鱼</h2>
                            <div class="dc-residue">
                                还剩<span>111</span>份
                            </div>
                            <div class="dc-price">
                                ¥<span>12.0</span>
                            </div>
                            <div class="dc-cartControl-wrapper">
                                <span class="dc-sub">－</span>
                                <span class="dc-count">12</span>
                                <span class="dc-add">＋</span>
                            </div>
                        </div>
                    </li>
                    <li class="dc-food-item">
                        <div class="dc-icon">
                            <img alt="food" src="images/food.png">
                        </div>
                        <div class="dc-food-content">
                            <h2 class="dc-name">外婆家清蒸鱼</h2>
                            <div class="dc-residue">
                                还剩<span>111</span>份
                            </div>
                            <div class="dc-price">
                                ¥<span>12.0</span>
                            </div>
                            <div class="dc-cartControl-wrapper">
                                <span class="dc-sub">－</span>
                                <span class="dc-count">12</span>
                                <span class="dc-add">＋</span>
                            </div>
                        </div>
                    </li>
                    <li class="dc-food-item">
                        <div class="dc-icon">
                            <img alt="food" src="images/food.png">
                        </div>
                        <div class="dc-food-content">
                            <h2 class="dc-name">外婆家清蒸鱼</h2>
                            <div class="dc-residue">
                                还剩<span>111</span>份
                            </div>
                            <div class="dc-price">
                                ¥<span>12.0</span>
                            </div>
                            <div class="dc-cartControl-wrapper">
                                <span class="dc-sub">－</span>
                                <span class="dc-count">12</span>
                                <span class="dc-add">＋</span>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div>
            <div class="dc-menu-wrapper">
                <ul>
                    <li class="dc-menu-item">
          <span class="dc-text">
            主食
          </span>
                    </li>
                    <li class="dc-menu-item">
          <span class="dc-text">
            素菜
          </span>
                    </li>
                    <li class="dc-menu-item">
          <span class="dc-text">
            荤菜
          </span>
                    </li>
                    <li class="dc-menu-item">
          <span class="dc-text">
            点心
          </span>
                    </li>
                    <li class="dc-menu-item">
          <span class="dc-text">
            套餐
          </span>
                    </li>
                    <li class="dc-menu-item">
          <span class="dc-text">
            主食
          </span>
                    </li>
                    <li class="dc-menu-item dc-active">
          <span class="dc-text">
            素菜
          </span>
                    </li>
                    <li class="dc-menu-item">
          <span class="dc-text">
            荤菜
          </span>
                    </li>
                    <li class="dc-menu-item">
          <span class="dc-text">
            点心
          </span>
                    </li>
                    <li class="dc-menu-item">
          <span class="dc-text">
            套餐
          </span>
                    </li>
                </ul>
            </div>
            <div class="dc-foods-wrapper">
                <ul>
                    <li class="dc-food-item">
                        <div class="dc-icon">
                            <img alt="food" src="images/food.png">
                        </div>
                        <div class="dc-food-content">
                            <h2 class="dc-name">外婆家酸菜鱼</h2>
                            <div class="dc-residue">
                                还剩<span>111</span>份
                            </div>
                            <div class="dc-price">
                                ¥<span>12.0</span>
                            </div>
                            <div class="dc-cartControl-wrapper">
                                <span class="dc-sub">－</span>
                                <span class="dc-count">12</span>
                                <span class="dc-add">＋</span>
                            </div>
                        </div>
                    </li>
                    <li class="dc-food-item">
                        <div class="dc-icon">
                            <img alt="food" src="images/food.png">
                        </div>
                        <div class="dc-food-content">
                            <h2 class="dc-name">外婆家清蒸鱼</h2>
                            <div class="dc-residue">
                                还剩<span>111</span>份
                            </div>
                            <div class="dc-price">
                                ¥<span>12.0</span>
                            </div>
                            <div class="dc-cartControl-wrapper">
                                <span class="dc-sub">－</span>
                                <span class="dc-count">12</span>
                                <span class="dc-add">＋</span>
                            </div>
                        </div>
                    </li>
                    <li class="dc-food-item">
                        <div class="dc-icon">
                            <img alt="food" src="images/food.png">
                        </div>
                        <div class="dc-food-content">
                            <h2 class="dc-name">外婆家清蒸鱼</h2>
                            <div class="dc-residue">
                                还剩<span>111</span>份
                            </div>
                            <div class="dc-price">
                                ¥<span>12.0</span>
                            </div>
                            <div class="dc-cartControl-wrapper">
                                <span class="dc-sub">－</span>
                                <span class="dc-count">12</span>
                                <span class="dc-add">＋</span>
                            </div>
                        </div>
                    </li>
                    <li class="dc-food-item">
                        <div class="dc-icon">
                            <img alt="food" src="images/food.png">
                        </div>
                        <div class="dc-food-content">
                            <h2 class="dc-name">外婆家清蒸鱼</h2>
                            <div class="dc-residue">
                                还剩<span>111</span>份
                            </div>
                            <div class="dc-price">
                                ¥<span>12.0</span>
                            </div>
                            <div class="dc-cartControl-wrapper">
                                <span class="dc-sub">－</span>
                                <span class="dc-count">12</span>
                                <span class="dc-add">＋</span>
                            </div>
                        </div>
                    </li>
                    <li class="dc-food-item">
                        <div class="dc-icon">
                            <img alt="food" src="images/food.png">
                        </div>
                        <div class="dc-food-content">
                            <h2 class="dc-name">外婆家清蒸鱼</h2>
                            <div class="dc-residue">
                                还剩<span>111</span>份
                            </div>
                            <div class="dc-price">
                                ¥<span>12.0</span>
                            </div>
                            <div class="dc-cartControl-wrapper">
                                <span class="dc-sub">－</span>
                                <span class="dc-count">12</span>
                                <span class="dc-add">＋</span>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</section>
<footer class="dc-footer">
    <div class="dc-line">
        <p class="dc-arc"></p>
        <p class="dc-inline"></p>
    </div>
    <div class="dc-car-wrapper">
        <div class="dc-car clearfix">
            <div class="dc-circle">
                <img src="images/car.png" alt="car">
                <div class="dc-num">21</div>
            </div>
            <div class="dc-total-price">¥17</div>
        </div>
        <div class="dc-btn">
            <a href="#">选好了</a>
        </div>
    </div>
</footer>
<div class="dc-nutrition-cover">
    <div class="dc-mask">
        <div class="dc-close">×</div>
    </div>
    <div class="dc-nutrition   ">
        <header class="dc-nutrition-header">
            <p>营养分析</p>
            <p>2017-02-04 周五</p>
        </header>
        <section class="dc-nutrition-content">
            <div class="dc-energy-intake">
                <p>能量摄入</p>
                <p>实际<span>900kcal</span></p>
                <p>标准<span>600kcal</span></p>
            </div>
            <div class="dc-source-contrast">
                <div class="clearfix dc-source">
                    <div class="dc-fl">三大能量来源对比</div>
                    <div class="dc-fr">
                        <span><i></i>蛋白质</span>
                        <span><i></i>脂肪</span>
                        <span><i></i>碳水化合物</span>
                    </div>
                </div>
                <div class="clearfix dc-shiji">
                    <div class="dc-fl">实际</div>
                    <div class="dc-fl dc-flex">
                        <span>35%</span>
                        <span>30%</span>
                        <span>35%</span>
                    </div>
                </div>
                <div class="clearfix dc-shiji dc-biaozhun">
                    <div class="dc-fl ">标准</div>
                    <div class="dc-fl dc-flex">
                        <span>35%</span>
                        <span>30%</span>
                        <span>35%</span>
                    </div>
                </div>
            </div>
        </section>
        <footer class="dc-footer">
            <div class="dc-line">
                <p class="dc-arc"></p>
                <p class="dc-inline"></p>
            </div>
            <div class="dc-car-wrapper">
                <div class="dc-car clearfix">
                    <div class="dc-circle">
                        <img src="images/car.png" alt="car">
                        <div class="dc-num">21</div>
                    </div>
                    <div class="dc-total-price">¥17</div>
                </div>
                <div class="dc-btn">
                    <a href="#">选好了</a>
                </div>
            </div>
        </footer>
    </div>
</div>
<script src="js/index.js"></script>
</body>
</html>